<template>
    <div class="newsDetail">
        <van-nav-bar title="新闻详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="detailMain">
            <h2>{{ newsDetail.title }}</h2>
            <div class="source">
                <span>来源: {{ newsDetail.source }} &emsp;</span>
                <span class="createTime">{{ moment(newsDetail.create_time).format("YYYY-MM-DD") }} 浏览量:{{ newsDetail.clicks }}</span>
                <van-button @click="attentionChange" size="mini" icon="plus" :type="attentionFlat ? 'warning' : 'primary'">{{ attentionFlat ? "取消关注" : "关注ta" }}</van-button>
            </div>

            <!-- <p></p> -->
            <div class="newsContent">
                &emsp;&emsp;{{ newsDetail.content }}
                <img v-if="newImg == ''" :src="newsDetail.index_image_url" @error="imgError" alt="" />
                <img v-if="newImg != ''" :src="newImg" alt="" />

                <div class="collect">
                    <span>{{ activeFlat ? "取消收藏" : "收藏" }}&nbsp;</span> <van-icon name="star" @click="changeCollect" :class="activeFlat ? 'active' : ''" />
                </div>
            </div>
            <div class="newsComment">
                <div class="newsCommentMain">
                    <div class="ncmt" v-if="ccode == 200">
                        <h3>评论区({{ newsCommentList.length }})</h3>
                        <span>点击查看更多</span>
                    </div>

                    <comment-item v-if="ccode == 200" :item="item" v-for="item in newsCommentList" :key="item.id"></comment-item>
                    <span class="empty" v-else><van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80" description="暂无评论" /></span>

                    <div class="ncmb">
                        <van-cell-group>
                            <van-field center clearable v-model="commentValue" placeholder="发表此刻心情">
                                <template #button>
                                    <van-button @click="insertComment" size="small" type="primary">评论</van-button>
                                </template>
                            </van-field>
                        </van-cell-group>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import commentItem from "../../components/CommentItem.vue";
import moment from "moment";
import { Field, CellGroup, Button } from "vant";
import { ref, defineComponent, reactive, onMounted, onBeforeMount, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { selectComment, addComment, newsClick, insertCollect, selectCollect, getAttention, selectAttention } from "@/request/index";
let route = useRoute();
let router = useRouter();
let newsDetail = route.query.id;
// newsDetail.index_image_url = "https://images.weserv.nl/?url=" + newsDetail.index_image_url;
// console.log(newsDetail);
let ccode = ref(0);
let commentValue = ref("");
let newsCommentList = ref([]);
let activeFlat = ref(false);
let user_id = localStorage.getItem("token");
let attentionFlat = ref(false);
let newImg = ref("");
const imgError = () => {
    // console.log(newsDetail.index_image_url);
    // newsDetail.index_image_url = "https://images.weserv.nl/?url=" + newsDetail.index_image_url;
    // console.log(newsDetail.index_image_url);
    let dd = newsDetail.index_image_url.indexOf("https://images.weserv.nl/?url=");
    console.log(123, dd);
    if (dd > -1) {
        newImg.value = newsDetail.index_image_url.substring(30);
        console.log(newImg.value, 123);
    }
    // newsDetail.index_image_url = "https://images.weserv.nl/?url=" + newsDetail.index_image_url;
    // console.log("https://images.weserv.nl/?url=" + newsList.value[index].index_image_url);
};
const sendComment = () => {
    newsClick({ id: route.query.id })
        .then((data) => {
            newsDetail = data.rows[0];
            return newsDetail.id;
        })
        .then((x) => {
            selectComment({ comment_id: x, db_id: "news_comment" }).then((data) => {
                ccode.value = data.code;
                if (ccode.value == 200) {
                    newsCommentList.value = data.rows;
                    commentValue.value = "";
                }
            });
        });
};
const changeCollect = () => {
    if (localStorage.getItem("token")) {
        activeFlat.value = !activeFlat.value;
        // console.log("comment", user_id, newsDetail.id);
        insertCollect({ user_id, comment_id: newsDetail.id, comment_db: "comment" }).then((data) => {});
    } else {
        alert("未登录无法收藏!");
    }
};

onBeforeMount(() => {
    newsClick({ id: route.query.id })
        .then((data) => {
            newsDetail = data.rows[0];
            newsDetail.index_image_url = "https://images.weserv.nl/?url=" + newsDetail.index_image_url;

            return newsDetail.id;
        })
        .then((x) => {
            selectComment({ comment_id: x, db_id: "news_comment" }).then((data) => {
                ccode.value = data.code;
                if (ccode.value == 200) {
                    newsCommentList.value = data.rows;
                    commentValue.value = "";
                }
            });
        })
        .then(() => {
            selectCollect({ user_id, comment_id: route.query.id, comment_db: "comment" })
                .then((data) => {
                    console.log(data, 555);
                    return data.flat;
                })
                .then((x) => {
                    if (x == 0) {
                        activeFlat.value = false;
                    } else {
                        activeFlat.value = true;
                    }
                })
                .then(() => {
                    // console.log(user_id, newsDetail.source);
                    selectAttention({ user_id, attention_name: newsDetail.source }).then((data) => {
                        // console.log(data);
                        if (data.flat == 1) {
                            attentionFlat.value = true;
                        } else {
                            attentionFlat.value = false;
                        }
                    });
                });
        });

    // console.log(user_id, newsDetail.source, 54545);
    //
    //
    //
    //
    //
    //
    //
    //
});

const onClickLeft = () => history.back();
let title = ref("新闻详情");
defineComponent({
    commentItem,
});
const insertComment = () => {
    let time = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
    if (commentValue.value == "") {
        alert("内容不能为空");
        return;
    }
    let loginUser;
    if (localStorage.getItem("token")) {
        loginUser = localStorage.getItem("token");
    } else {
        loginUser = 2;
    }
    addComment(
        { comment_id: newsDetail.id, content: commentValue.value, create_time: time, user_id: loginUser, db_id: "news_comment" },
        { headers: { token: localStorage.getItem("autoToken") } }
    ).then((data) => {
        if (data.code == 200) {
            sendComment();
        } else {
            alert(data.msg);
        }
    });
};
let token = localStorage.getItem("autoToken");
const attentionChange = () => {
    if (localStorage.getItem("token")) {
        attentionFlat.value = !attentionFlat.value;
        console.log("发布作者", newsDetail.source, "用户", user_id);
        let create_time = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");

        getAttention({ user_id, attention_name: newsDetail.source, create_time }, { headers: { token } }).then((data) => {
            console.log(data.msg);
        });
    } else {
        alert("未登录,无法关注!");
    }
};
</script>
<style lang="scss">
@import "../../static/style/variable.scss";
.collect {
    text-align: right;
    font-size: 24px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > span {
        font-size: 16px;
    }
    .van-icon.active {
        color: $activeColor;
    }
}
.van-nav-bar .van-icon {
    color: $activeColor;
}
img {
    width: 100%;
}
.van-nav-bar__text {
    color: $activeColor;
}
.detailMain {
    padding: 0.2667rem;
    padding-bottom: 1.3333rem;
    h2 {
        font-size: 0.5333rem;
        line-height: 0.7467rem;
        text-align: center;
    }
    .source {
        margin-top: 0.5333rem;
        display: flex;
        font-size: 0.3733rem;
        align-items: center;
        justify-content: center;
        .createTime {
            font-size: 0.32rem;
        }
        > .van-button {
            margin-left: 12px;
        }
    }
    .newsContent {
        margin-top: 0.5333rem;
        line-height: 0.8rem;
        padding: 0 0.16rem 0.5333rem;
        border-bottom: 1px solid #ccc;
    }
    .newsComment {
        margin-top: 0.2667rem;
        padding-bottom: 0.2667rem;
        color: #666;
        .ncmt {
            display: flex;
            padding: 0.4rem 0.16rem 0;

            justify-content: space-between;
        }
        .ncmm {
            margin-top: 0.2667rem;
            border-bottom: 0.0136rem solid #ccc;
            padding-bottom: 0.2667rem;
            .ncmmtop {
                padding-top: 0.2667rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .userContent {
                    display: flex;
                    align-items: center;
                }
                .userImg {
                    margin-left: 0.2667rem;
                    width: 0.64rem;
                    height: 0.64rem;
                }
                .userTitle {
                    margin-left: 0.16rem;
                }
                .userRight {
                    margin-right: 0.2667rem;
                    font-weight: 100;
                }
            }
            .ncmmMain {
                margin: 0 0.2667rem;
                margin-top: 0.2667rem;
                line-height: 0.5333rem;
                font-size: 0.3733rem;
                font-weight: 100;
                word-break: break-all;
                .reply {
                    margin-top: 0.2667rem;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
        .ncmb {
            margin-top: 0.4rem;
            padding: 0 0.2667rem;
        }
    }
}
</style>
